<template>
    <div>
      <div class="body">
        <!-- 单位信息 -->
        <div class="card-body">
          <!-- 单位信息 -->
          <div class="form-card">
            <div class="title">
              单位信息
            </div>
            <div class="body" >
              <a-form :model="formState" :label-col="formConfig01.labelCol" :wrapper-col="formConfig01.wrapperCol">
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="单位名称">
                      <a-input v-model:value="formState.name" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="单位地址">
                      <a-input v-model:value="formState.address" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="关注等级">
                      <a-select v-model:value="formState.inspectLevel" placeholder="请选择">
                        <a-select-option value="High">重点单位</a-select-option>
                        <a-select-option value="Medium">普通单位</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="辖区派出所">
                      <a-select v-model:value="formState.psId" placeholder="请选择">
                        <a-select-option v-for="item in psIds" :key='item' :value="item.id">{{item.name}}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <!-- 第二排 -->
                  <a-col :span="6">
                    <a-form-item label="单位性质">
                      <a-select v-model:value="formState.natureTypeId" placeholder="单位性质">
                        <a-select-option v-for="item in natureTypeIds" :key='item' :value="item.id">{{item.name}}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
          <!-- 联系信息 -->
          <div class="form-card">
            <div class="title">联系信息</div>
            <div class="body" >
              <a-form :model="formState" :label-col="formConfig01.labelCol" :wrapper-col="formConfig01.wrapperCol">
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="责任部门">
                      <a-input v-model:value="formState.resDepartment" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="负责人姓名">
                      <a-input v-model:value="formState.contactName" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="负责人电话">
                      <a-input v-model:value="formState.contactMobile" />
                    </a-form-item>
                  </a-col> 
                  <a-col :span="6">
                    <a-form-item label="负责人邮箱">
                      <a-input v-model:value="formState.contactEmail" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
            <!-- 资产 -->
          <div class="form-card">
            <div class="title">资产</div>
            <div class="body" >
              <a-form :model="formState" :label-col="formConfig02.labelCol" :wrapper-col="formConfig02.wrapperCol" >
                <a-row>
                  <a-col :span="12" >
                    <a-form-item label="网站域名" >
                      <a-textarea style="height:156px" v-model:value="formState.urls" placeholder="请输入网站主页地址，如:http://www.baidu.com多个主页地址可用{,}分割.输入主页地址时需包括协议信息，如无协议信息，则默认为http"/>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="IP或IP段">
                      <a-textarea style="height:156px" v-model:value="formState.ips" placeholder="支持以下几种格式输入IP或IP段，多个IP或IP段之前以“”或回车割192.168.1.1192.168.1.0/24（CIDR格式不包含首尾网络和广播地址)192.168.1.1-92.168.1.10.支持IPv6"/>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
        </div>
      </div>
      <!-- 提交按鈕 -->
      <div class="form-btns">
        <a-button type="primary" shape="round" :size="size"  @click="onSubmit(formState,this)">
            确定
        </a-button>
        <router-link  :to="{path:'/Management'}">
          <a-button class="close" shape="round" :size="size" >
              取消
          </a-button>
        </router-link>
      </div>
    </div>
</template>

<script>
import httpRequest from "@/util/httpRequest";
import { reactive, computed } from "vue";
import { Form } from "ant-design-vue";
import { toArray } from "lodash-es";
import { useStore } from "vuex";
const useForm = Form.useForm;
export default {
  name: "disktop",
  components: {},
  setup() {
    const modelRef = reactive({
      name: "",
      region: undefined,
      type: []
    });
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "Please input name"
        }
      ],
      address: [
        {
          required: true,
          message: " address"
        }
      ],
      psId: [
        {
          required: true,
          message: "Please select type"
        }
      ],
      inspectLevel: [
        {
          required: true,
          message: "Please select type"
        }
      ]
    });
    const { validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef);
    const errorInfos = computed(() => {
      return mergeValidateInfo(toArray(validateInfos));
    });
    return {
      errorInfos
    };
  },
  data() {
    return {
      formConfig01: {
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 24
        }
      },
      formConfig02: {
        labelCol: {
          span: 3
        },
        wrapperCol: {
          span: 24
        }
      },
      // 单位性质集
      natureTypeIds: [],
      //角色集合
      psIds: [],
      formState: {
        name: "",
        address: "",
        inspectLevel: null, // High重点单位,Medium普通单位
        natureTypeId: null, // 单位性质编号, 来自接口 /getFirmNatureTypeOptions.do
        psId: null, // 辖区派出所编号, 来自接口 /getNoRoleOptions.do
        resDepartment: "", // 责任部门
        contactName: "", // 联系人姓名
        contactMobile: "", // 联系电话
        contactEmail: "", // 联系邮箱
        urls: "", // 多个按逗号分割
        ips: "" // 多个按逗号分割
      }
    };
  },
  mounted() {
    const store = useStore();
    store.dispatch("setBreadcrumb", {
      text: "单位管理/新建单位",
      isBack: true
    });
    httpRequest.post("企业性质集合(用于选择框)", {}).then(res => {
      this.natureTypeIds = res.data.list;
    });
    httpRequest.post("角色集合", {}).then(res => {
      this.psIds = res.data.list;
    });
  },
  methods: {
    doTheThing: e => {
      console.log(e.id);
      httpRequest.post("getFirmDetail", { id: e.id }).then(res => {
        console.log(res);
      });
    },
    onSubmit: (formData, that) => {
      httpRequest.post("创建企业", formData).then(res => {
        console.log("创建企业成功", res);
        that.$router.push("/Management");
      });
    }
  }
};
</script>

<style lang="less" scoped>
.body {
  padding: 30px;
  background: #fff;
  .card {
    width: 100%;
  }
}
</style>
